<!--
 * @FilePath     : /layui/demo/1577.html
 * @Description  : layui 弹框中加载多选
 * @Date         : 2025-02-24 17:20
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-25 08:47
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <button class="btn" id="demo1-btn">弹出多选</button>

    <script src="/layui/dist/layui.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      document.getElementById('demo1-btn').onclick = function () {
        layer.open({
          type: 1,
          title: '多选',
          content: '<div id="demo1" class="xm-select-demo-alert"></div>', // 渲染 xm-select 的容器
          success: function (layero, index) {
            // tip: 这里因为内容过少，会被遮挡，所以简单修改了下样式
            document
              .getElementById('layui-layer' + index)
              .getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset'

            // 渲染多选
            var demo1 = xmSelect.render({
              el: '#demo1',
              data: [
                { name: '张三', value: 1, selected: true },
                { name: '李四', value: 2, disabled: true },
                { name: '王五', value: 3 },
              ],
            })
          },
        })
      }
    </script>
  </body>
</html>
